<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/8/4 星期一
  Time: 16:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>




<!DOCTYPE html>
<html>

<head>
    <base href="${pageContext.request.contextPath}/" />
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="static/bootstrapvalidator/css/bootstrapValidator.css"
          rel="stylesheet">
    <style>
        /*定义类名为.thead-blue的样式*/
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
    </style>
    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.js"></script>
    <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>

</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">编辑[报销申请]流程节点</h4>
        <input type="hidden" id="flowid" value="${flowId}">
    </div>
    <div class="panel-body">
        <div class="col-md-12" style="text-align: right;">
            <button type="button" onclick="editNode(0)" class="btn btn-success" >添加节点</button>
            <button type="button" onclick="location.href='judge/flow/listFlow'" class="btn btn-info">返回</button>
        </div>

        <c:forEach items="${nodeVos}" var="nodeVo" varStatus="loop">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-primary">
                    <div class="panel-heading" style="text-align: center">
                        ${loop.index+1}.${nodeVo.name}
                    </div>
                    <div class="panel-body">
                        <div class="col-md-7">
                            <c:choose>
                                <c:when test="${nodeVo.isByDept eq 'Y'}">
                                    按部门审批
                                </c:when>
                                <c:otherwise>
                                    ${nodeVo.deptName}--${nodeVo.jobName} 审批
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <div class="col-md-5">
                            <button type="button" onclick="editNode(${nodeVo.oid},'${nodeVo.name}','${nodeVo.prenodeid}',
                                    '${nodeVo.deptid}','${nodeVo.jobid}','${nodeVo.isByDept}')" class="btn btn-success btn-xs" >修改节点</button>
                            <button type="button" onclick="deleteNode(${nodeVo.oid},${nodeVo.parentid})" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#confirmModal">删除节点</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-md-offset-3" style="text-align: center">
                <img src="static/img/next.png" width="38px">
                <BR><BR>
            </div>
        </c:forEach>


        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading" style="text-align: center">
                    结束
                </div>
                <div class="panel-body" style="text-align: center">
                    审批完成
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editNodeModal" tabindex="-1" role="dialog"
     aria-labelledby="editNodeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="editNodeModalLabel">编辑节点信息</h4>
            </div>
            <form action="judge/node/editNode" method="post" class="form-horizontal" role="form"
                  id="editNodeForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="name" class="col-md-3 control-label">节点名称</label>
                            <div class="col-md-8">
                                <input type="hidden" name="oid" id="oid">
                                <input type="hidden" name="parentid" id="parentid" value="${flowId}">
                                <input type="text" id="name" name="name" class="form-control" placeholder="请输入节点名称">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="prenodeid" class="col-md-3 control-label">上级节点</label>
                            <div class="col-md-8">
                                <select id="prenodeid" name="prenodeid" class="form-control">
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="isByDept" class="col-md-3 control-label">审批类型</label>
                            <div class="col-md-8">
                                <select id="isByDept" name="isByDept" class="form-control">
                                    <option value="Y">--按部门归属--</option>
                                    <option value="N">--按相关部门--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="deptrow">
                        <div class="form-group col-md-12">
                            <label for="deptid" class="col-md-3 control-label">审批部门</label>
                            <div class="col-md-8">
                                <select id="deptid" name="deptid" class="form-control">
                                    <option value="">--请选择部门--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row" id="jobrow">
                        <div class="form-group col-md-12">
                            <label for="jobid" class="col-md-3 control-label">审批职门</label>
                            <div class="col-md-8">
                                <select id="jobid" name="jobid" class="form-control">
                                    <option value="">--请选择职位--</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" id="sub"  class="btn btn-primary">确认提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div style="display: none;">
    <select id="demoprenodeid">
        <option value="">--设为首节点--</option>
    <c:forEach items="${nodeVos}" var="nodeVo">
        <option value="${nodeVo.oid}">--${nodeVo.name}--</option>
    </c:forEach>
    </select>
</div>

<br>
<br>
<br>



<!-- 模态框（Modal） -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="confirmModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body">
                确认删除吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" id="subconfirm" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#subconfirm").click(function(){
            deleteConfirm();
            $('#confirmModal').modal('hide');
        });
    });
</script>


<!-- 模态框（Modal） -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="alertMsgModalLabel">
                    提示
                </h4>
            </div>
            <div class="modal-body" id="alertmsg">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>






<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){//没有权限
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>


</body>
<script type="text/javascript">

    var deleteoid;
    var parentid;
    function deleteNode(oid,parentId){
        deleteoid = oid;
        parentid = parentId;
    }
    function deleteConfirm(){
        $.get("judge/node/deleteNode",{"oid":deleteoid,"flowId":parentid},function(s){
            if(s==true){
                document.location.href="judge/node/listNode?flowId="+$("#flowid").val();
            }else{
                $("#alertmsg").text("删除失败!当前节点正在使用，不能删除!");
                $('#alertMsgModal').modal('show');
            }
        });
    }

    function editNode(oid,name,prenodeid,deptid,jobid,isByDept){
        $('#prenodeid')[0].options.length=0;//清空上级下拉框的所有选项
        $('#prenodeid').append($('#demoprenodeid option').clone());//将隐藏域中的选项复制到上级部门的下拉框中，以此实现上级的更新
        if(oid==0){//使用oid实现添加和修改模态框的复用，oid为0则为添加
            $("#oid").val("");
            $("#name").val("");
            $("#prenodeid").val("");
            $("#deptid").val("");
            $("#jobid").val("");
            $("#isByDept").val("Y");//添加节点默认按部门归属
            $("#deptrow").hide();//默认隐藏部门
            $("#jobrow").hide();//默认隐藏职位

        }else{
            $("#oid").val(oid);
            $("#name").val(name);
            $("#prenodeid").val(prenodeid);
            $("#deptid").val(deptid);
            loadjob(deptid,jobid);
            $("#isByDept").val(isByDept);
            if(isByDept=='Y'){
                $("#deptrow").hide();
                $("#jobrow").hide();
            }else{
                $("#deptrow").show();
                $("#jobrow").show();
            }
            $("#prenodeid option[value='"+oid+"']").remove();
        }
        $('#editNodeModal').modal('show');
    }

    $(document).ready(function() {

        bindValidation();//绑定验证

        $('#editNodeModal').on('hidden.bs.modal', function() {//监听modal消失
            $("#editNodeForm").data('bootstrapValidator').destroy();
            $('#editNodeForm').data('bootstrapValidator',null);
            bindValidation();//要重新绑定验证
            $("#editNodeForm")[0].reset(); //将表单中的数据也清空

        })

        loaddept();

        $("#deptid").change(function(){
            loadjob(this.value);
        });

        $("#isByDept").change(function(){
            if($(this).val()=="Y"){
                $("#deptrow").hide();
                $("#jobrow").hide();
            }else{
                $("#deptid").val("");
                $("#jobid").val("");
                $("#deptrow").show();
                $("#jobrow").show();
            }
        });

        $("#deptrow").hide();
        $("#jobrow").hide();
    });


    function loaddept(){
        $.getJSON("hr/zz-department/listDeptUseSelect",function(listdept){
            var dept = $("#deptid")[0];
            dept.options.length=1;
            for(var i=0;i<listdept.length;i++){
                var d = listdept[i];
                dept.options.add(new Option(d.deptName,d.oid));
            }
        });
    }

    function loadjob(deptid,jobid){
        $("#jobid")[0].options.length=1;
        if(this.value==""){
            return;
        }
        $.getJSON("hr/zz-department-job/listDeptJobUseSelect",{"deptid":deptid},function(listjob){
            var job = $("#jobid")[0];
            job.options.length=1;
            for(var i=0;i<listjob.length;i++){
                var job1 = listjob[i];
                job.options.add(new Option(job1.jobName,job1.jobid));
            }
            $("#jobid").val(jobid);
        });
    }

    function bindValidation(){
        $("#editNodeForm").bootstrapValidator({
            message : 'This value is not valid',
            feedbackIcons : {/*input状态样式图片*/
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                name : {
                    validators : {
                        notEmpty : {/*非空提示*/
                            message : '请输入节点名称'
                        }
                    }
                },
                deptid : {
                    validators : {
                        callback: {
                            message: '请选择审批的部门',
                            callback: function(value, validator) {
                                if($("#deptid").val()=="" && $("#isByDept").val()=='N') {
                                    return false;
                                }else {
                                    return true;
                                }
                            }
                        }
                    }
                },
                jobid : {
                    validators : {
                        callback: {
                            message: '请选择审批的职位',
                            callback: function(value, validator) {
                                if($("#jobid").val()=="" && $("#isByDept").val()=='N') {
                                    return false;
                                }else {
                                    return true;
                                }
                            }
                        }
                    }
                }
            },
            submitHandler : function(validator,form, submitButton) {
                validator.defaultSubmit();
            }
        });
    }

</script>
</html>
